<!--
 * @Author: suo.tianbao suo.tianbao@vpclub.cn
 * @Date: 2023-07-24
 * @LastEditors: suo.tianbao suo.tianbao@vpclub.cn
 * @LastEditTime: 2023-07-24
 * @FilePath: /element-admin/src/views/MemberInfo.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div id="MemberAddressInfo-page" class="both-center">
    <!-- bodyer -->
    <div class="drawer-bodyer">
      <el-row class="row fstRow clearfix">
        <el-button plain size="mini" type="primary" @click="handleInit">初始化数据</el-button>
        <el-button plain size="mini" type="info" @click="handleRefesh">刷新</el-button>
        <el-button plain size="mini" type="success" @click="handleSave">保存</el-button>
      </el-row>
      <el-divider content-position="left">会员地址</el-divider>
      <!--分类栏内容介绍行-->
      <el-form :label-width="labelWidth" :model="Address" label-position="right">
        <el-row class="row fstRow clearfix">
          <el-col :lg="8" :md="8" :sm="8" :xl="8" :xs="8">
            <el-form-item label="常驻城市选择">
              <el-cascader
                  style="width: 300px"
                  v-model="selectedAddressOptions"
                  :options="options"
                  size="large"
                  @change="addressChange">
              </el-cascader>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="row fstRow clearfix">
          <el-col :lg="8" :md="8" :sm="8" :xl="8" :xs="8">
            <el-form-item label="省份">
              <el-input v-model="Address.address.provice" readonly></el-input>
            </el-form-item>
          </el-col>
          <el-col :lg="8" :md="8" :sm="8" :xl="8" :xs="8">
            <el-form-item label="地市">
              <el-input v-model="Address.address.city" readonly></el-input>
            </el-form-item>
          </el-col>
          <el-col :lg="8" :md="8" :sm="8" :xl="8" :xs="8">
            <el-form-item label="区县">
              <el-input v-model="Address.address.region" readonly></el-input>
            </el-form-item>
          </el-col>
          <el-col :lg="8" :md="8" :sm="8" :xl="8" :xs="8">
            <el-form-item label="联系人">
              <el-input v-model="Address.address.linku" maxlength="20"></el-input>
            </el-form-item>
          </el-col>
          <el-col :lg="8" :md="8" :sm="8" :xl="8" :xs="8">
            <el-form-item label="联系电话">
              <el-input v-model="Address.address.linkp" maxlength="11"></el-input>
            </el-form-item>
          </el-col>
          <el-col :lg="8" :md="8" :sm="8" :xl="8" :xs="8">
            <el-form-item label="联系地址邮编">
              <el-input v-model="Address.address.post" maxlength="6"></el-input>
            </el-form-item>
          </el-col>
          <el-col :lg="10" :md="10" :sm="10" :xl="10" :xs="10">
            <el-form-item label="联系地址">
              <el-input v-model="Address.address.detal" maxlength="100"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="row fstRow clearfix">
          <el-divider/>
        </el-row>
        <el-row class="row fstRow clearfix">
          <el-col :lg="8" :md="8" :sm="8" :xl="8" :xs="8">
            <el-form-item label="常驻城市选择">
              <el-cascader
                  style="width: 300px"
                  v-model="selectedDevAddressOptions"
                  :options="options"
                  size="large"
                  @change="devAddressChange">
              </el-cascader>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="row fstRow clearfix">
          <el-col :lg="8" :md="8" :sm="8" :xl="8" :xs="8">
            <el-form-item label="省份">
              <el-input v-model="Address.devaddress.provice" readonly></el-input>
            </el-form-item>
          </el-col>
          <el-col :lg="8" :md="8" :sm="8" :xl="8" :xs="8">
            <el-form-item label="地市">
              <el-input v-model="Address.devaddress.city" readonly></el-input>
            </el-form-item>
          </el-col>
          <el-col :lg="8" :md="8" :sm="8" :xl="8" :xs="8">
            <el-form-item label="区县">
              <el-input v-model="Address.devaddress.region" readonly></el-input>
            </el-form-item>
          </el-col>
          <el-col :lg="8" :md="8" :sm="8" :xl="8" :xs="8">
            <el-form-item label="收件人">
              <el-input v-model="Address.devaddress.linku" maxlength="20"></el-input>
            </el-form-item>
          </el-col>
          <el-col :lg="8" :md="8" :sm="8" :xl="8" :xs="8">
            <el-form-item label="收件电话">
              <el-input v-model="Address.devaddress.linkp" maxlength="11"></el-input>
            </el-form-item>
          </el-col>
          <el-col :lg="8" :md="8" :sm="8" :xl="8" :xs="8">
            <el-form-item label="收件地址邮编">
              <el-input v-model="Address.devaddress.post" maxlength="6"></el-input>
            </el-form-item>
          </el-col>
          <el-col :lg="10" :md="10" :sm="10" :xl="10" :xs="10">
            <el-form-item label="收件地址">
              <el-input v-model="Address.devaddress.detal" maxlength="100"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </div>
</template>

<script>
import {add, fetchOne,} from "@/api/MemberAddress";
import {Loading, Message} from 'element-ui';
import {codeToText, regionData} from 'element-china-area-data'

export default {
  name: "MemberAddressInfo",
  components: {},
  data() {
    return {
      loadingInstance: null,
      labelWidth: "120px",
      member_id: '',
      selectedAddressOptions: [],
      selectedDevAddressOptions: [],
      options: regionData,
      Address: {
        id: 0,
        address: {
          linku: "",
          linkp: "",
          post: "",
          provice: "",
          city: "",
          region: "",
          provice_code: "",
          city_code: "",
          region_code: "",
          detal: "",
        },
        devaddress: {
          linku: "",
          linkp: "",
          post: "",
          provice: "",
          city: "",
          region: "",
          provice_code: "",
          city_code: "",
          region_code: "",
          detal: "",
        }
      },
    }
  },
  props: {
    drawId: {type: String, default: ''}
  },
  computed: {},
  methods: {
    handleInit() {
      this.Address = this.initAddress()
      this.handleLoad();
    },
    initAddress() {
      return new Object({
        id: 0,
        address: {
          linku: "",
          linkp: "",
          post: "",
          provice: "",
          city: "",
          region: "",
          provice_code: "",
          city_code: "",
          region_code: "",
          detal: ""
        },
        devaddress: {
          linku: "",
          linkp: "",
          post: "",
          provice: "",
          city: "",
          region: "",
          provice_code: "",
          city_code: "",
          region_code: "",
          detal: ""
        }
      });
    },
    handleLoad() {
      let param = {"memberId": this.member_id}
      fetchOne(param).then(res => {
        if (res.code == 200) {
          this.Address = res.data;
        }
      }).catch(err => {
        this.$message.error('错了哦，这是一条错误消息' + err);
      });
    },
    handleRefesh() {
      this.handleLoad();
    },
    handleSave() {
      add({data: this.Address, "memberId": this.member_id}).then((result) => {
        if (result.code == 200) {
          Message({message: "执行成功", type: 'success', duration: 3 * 1000});
          this.$emit('fMethod', true);
        } else {
          Message({message: result.message, type: 'error', duration: 3 * 1000});
        }
      }).catch(err => {
        this.$message.error('执行失败，平台返回错误消息:' + err);
      });
    },
    addressChange(arr) {
      this.Address.address.provice = codeToText[arr[0]];
      this.Address.address.city = codeToText[arr[1]];
      this.Address.address.region = codeToText[arr[2]];
      this.Address.address.provice_code = arr[0]
      this.Address.address.city_code = arr[1]
      this.Address.address.region_code = arr[2]
    },
    devAddressChange(arr) {
      this.Address.devaddress.provice = codeToText[arr[0]];
      this.Address.devaddress.city = codeToText[arr[1]];
      this.Address.devaddress.region = codeToText[arr[2]];
      this.Address.devaddress.provice_code = arr[0]
      this.Address.devaddress.city_code = arr[1]
      this.Address.devaddress.region_code = arr[2]
    },
  },
  created() {
    let options = {fullscreen: true}
    this.loadingInstance = Loading.service(options);
    this.loadingInstance.close();
  },
  mounted() {
  },
  watch: {
    drawId: {
      immediate: true,
      handler(drawId) {
        this.member_id = drawId;
        this.handleInit();
      }
    }
  }
}
</script>

<style scoped>
li {
  list-style-type: none;
}

.fstRow {
  margin-top: 0px;
  display: flex;
  padding: 5px 5px 5px 5px;
}

.card-top-container {
  display: block;
  padding: 5px;
  width: 100%;
  height: auto;
  justify-content: center;
  align-items: center;
}

#container > div {
  margin: 5px;
  width: 400px; /*宽度根据实际情况调节，应与上面一致*/
  overflow: auto; /*防止内容溢出导致布局错位*/
}
</style>